<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>25-11点名工具</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        padding-top: 70px; /* 为固定顶栏留出空间 */
      }

      /* 固定顶栏 */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 12px 20px;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow-x: auto; /* 允许横向滚动 */
        white-space: nowrap; /* 防止按钮换行 */
      }

      /* 隐藏滚动条但保持滚动功能 */
      .header::-webkit-scrollbar {
        display: none;
      }

      .app-title {
        font-size: 1.4rem;
        color: #2c3e50;
        font-weight: 600;
        margin-right: 15px;
        flex-shrink: 0; /* 防止标题被压缩 */
      }

      .header-controls {
        display: flex;
        gap: 12px;
        flex-shrink: 0; /* 防止控制按钮被压缩 */
      }

      button {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        background: #3498db;
        color: white;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        font-size: 0.9rem;
        flex-shrink: 0; /* 防止按钮被压缩 */
      }

      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        background: #2980b9;
      }

      button.clear {
        background: #e74c3c;
      }

      button.clear:hover {
        background: #c0392b;
      }

      button.toggle {
        background: #9b59b6;
      }

      button.toggle:hover {
        background: #8e44ad;
      }

      /* 主内容区域 */
      .container {
        max-width: 1200px;
        margin: 20px auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        padding: 25px;
      }

      /* 人名网格 */
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        margin-bottom: 25px;
      }

      .person-btn {
        padding: 15px 10px;
        background: #ecf0f1;
        border: 2px solid #bdc3c7;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-weight: 500;
        color: #2c3e50;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word; /* 处理长文本 */
        overflow-wrap: break-word;
        line-height: 1.4;
      }

      .person-btn:hover {
        background: #d6dbdf;
        transform: scale(1.03);
      }

      .person-btn.highlighted {
        background: #2ecc71;
        color: white;
        border-color: #27ae60;
        box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
      }

      /* 导入导出区域 */
      .import-export {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        display: none; /* 默认隐藏 */
      }

      .import-export.visible {
        display: block;
      }

      .import-export h2 {
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 1.3rem;
      }

      textarea {
        width: 100%;
        height: 120px;
        padding: 15px;
        border: 2px solid #bdc3c7;
        border-radius: 8px;
        resize: vertical;
        margin-bottom: 15px;
        font-size: 16px;
      }

      .action-buttons {
        display: flex;
        gap: 15px;
      }

      .status {
        padding: 10px;
        border-radius: 6px;
        font-weight: 500;
        margin-top: 15px;
        display: none;
      }

      .status.success {
        background: #d4edda;
        color: #155724;
        display: block;
      }

      .status.error {
        background: #f8d7da;
        color: #721c24;
        display: block;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .header {
          padding: 10px 15px;
        }

        .app-title {
          font-size: 1.2rem;
        }

        button {
          padding: 8px 12px;
          font-size: 0.85rem;
        }

        .grid {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
      }

      @media (max-width: 480px) {
        .app-title {
          font-size: 1.1rem;
          margin-right: 10px;
        }

        button {
          padding: 7px 10px;
          font-size: 0.8rem;
        }

        .grid {
          grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        }

        .person-btn {
          padding: 12px 6px;
          font-size: 0.9rem;
        }
      }
    </style>
  </head>
  <body>
    <!-- 固定顶栏 -->
    <div class="header">
      <div class="app-title">25-11点名工具</div>
      <div class="header-controls">
        <button id="toggleImportExport">导入/导出</button>
        <button id="selectAll">全选</button>
        <button id="toggleSelection" class="toggle">反选</button>
        <button id="clearAll" class="clear">清除所有</button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="container">
      <div class="grid" id="peopleGrid">
        <!-- 人名按钮将通过 JavaScript 动态生成 -->
      </div>

      <!-- 导入/导出区域 (默认隐藏) -->
      <div class="import-export" id="importExportSection">
        <h2>导入/导出高亮状态</h2>
        <textarea
          id="importExportText"
          placeholder="每行一个人名，表示高亮状态。导出时这里将显示高亮的人名，导入时请确保格式正确。"
        ></textarea>
        <div class="action-buttons">
          <button id="exportBtn">导出高亮</button>
          <button id="importBtn">导入高亮</button>
        </div>
        <div id="statusMessage" class="status"></div>
      </div>
    </div>

    <script>
      // 预定义的人名列表（包含一些长人名）
      const peopleList = [
        "吴冰雨",
        "蒋博铭",
        "冉玉婷",
        "周文轩",
        "郭耀祖",
        "曹雅欣",
        "颜文璨",
        "胡京筱",
        "李田野",
        "袁枫翔",
        "张凯涵",
        "阳雨熙",
        "温雪盛",
        "张荣程",
        "鲁晓斌",
        "苗政",
        "张博文",
        "肖开亓",
        "范科云",
        "沈子齐",
        "裴毅恒",
        "王雅婕",
        "李泽同",
        "王天铄",
        "孙鑫硕",
        "黄科斐",
        "屈才玄",
        "张卓雅",
        "陈鸿全",
        "张思源",
        "张炳慧",
        "杨学彬",
        "由业鹏",
        "胡文续",
        "曹嘉琪",
        "迪拉热·努尔麦麦提",
        "尼格热·库尔班",
        "努如拉·马木提",
        "提力克·巴合提亚尔",
        "艾尔帕提·艾孜木",
        "艾孜热提·艾合买提",
        "麦麦提喀日·艾海提",
        "米浩然",
        "马钰哲",
        "于晨辉"

      ];

      // 用于存储高亮状态
      let highlightedPeople =
        JSON.parse(localStorage.getItem("highlightedPeople")) || [];

      // 初始化函数
      function initializeGrid() {
        const grid = document.getElementById("peopleGrid");
        grid.innerHTML = "";

        peopleList.forEach((person) => {
          const button = document.createElement("button");
          button.className = "person-btn";
          button.textContent = person;
          button.setAttribute("data-name", person);

          // 如果该人员在 highlightedPeople 中，则添加高亮类
          if (highlightedPeople.includes(person)) {
            button.classList.add("highlighted");
          }

          button.addEventListener("click", () => {
            button.classList.toggle("highlighted");

            if (button.classList.contains("highlighted")) {
              // 如果尚未在数组中，则添加
              if (!highlightedPeople.includes(person)) {
                highlightedPeople.push(person);
              }
            } else {
              // 从数组中移除
              highlightedPeople = highlightedPeople.filter((p) => p !== person);
            }

            // 保存到 localStorage
            localStorage.setItem(
              "highlightedPeople",
              JSON.stringify(highlightedPeople)
            );
          });

          grid.appendChild(button);
        });
      }

      // 显示状态消息
      function showStatus(message, isSuccess = true) {
        const statusElement = document.getElementById("statusMessage");
        statusElement.textContent = message;
        statusElement.className = isSuccess ? "status success" : "status error";

        // 3 秒后隐藏消息
        setTimeout(() => {
          statusElement.className = "status";
        }, 3000);
      }

      // 导出高亮人员
      function exportHighlighted() {
        const textarea = document.getElementById("importExportText");
        textarea.value = highlightedPeople.join("\n");
        showStatus("高亮人员已导出到文本框");
      }

      // 导入高亮人员
      function importHighlighted() {
        const textarea = document.getElementById("importExportText");
        const names = textarea.value
          .split("\n")
          .map((name) => name.trim())
          .filter((name) => name);

        // 验证所有人名是否在预定义列表中
        const invalidNames = names.filter((name) => !peopleList.includes(name));

        if (invalidNames.length > 0) {
          showStatus(`以下人名无效：${invalidNames.join(", ")}`, false);
          return;
        }

        highlightedPeople = names;
        localStorage.setItem(
          "highlightedPeople",
          JSON.stringify(highlightedPeople)
        );
        initializeGrid();
        showStatus("高亮人员已成功导入");
      }

      // 清除所有高亮
      function clearAllHighlights() {
        highlightedPeople = [];
        localStorage.removeItem("highlightedPeople");
        initializeGrid();
        showStatus("已清除所有高亮");
      }

      // 全选
      function selectAll() {
        highlightedPeople = [...peopleList];
        localStorage.setItem(
          "highlightedPeople",
          JSON.stringify(highlightedPeople)
        );
        initializeGrid();
        showStatus("已选择所有人名");
      }

      // 反选
      function toggleSelection() {
        // 创建当前未选中的人员列表
        const unselectedPeople = peopleList.filter(
          (person) => !highlightedPeople.includes(person)
        );

        // 将高亮人员设置为未选中的人员
        highlightedPeople = unselectedPeople;
        localStorage.setItem(
          "highlightedPeople",
          JSON.stringify(highlightedPeople)
        );
        initializeGrid();
        showStatus("已反选所有人名");
      }

      // 切换导入/导出区域可见性
      function toggleImportExport() {
        const section = document.getElementById("importExportSection");
        section.classList.toggle("visible");
      }

      // 添加事件监听器
      document
        .getElementById("exportBtn")
        .addEventListener("click", exportHighlighted);
      document
        .getElementById("importBtn")
        .addEventListener("click", importHighlighted);
      document
        .getElementById("clearAll")
        .addEventListener("click", clearAllHighlights);
      document.getElementById("selectAll").addEventListener("click", selectAll);
      document
        .getElementById("toggleSelection")
        .addEventListener("click", toggleSelection);
      document
        .getElementById("toggleImportExport")
        .addEventListener("click", toggleImportExport);

      // 初始化网格
      initializeGrid();
    </script>
  </body>
</html>
